<template>
	<div id="s1">
		<el-container class='s1-container'>
			<!-- 头部区域 -->
			<el-header></el-header>
			<!-- 主体区域 -->
			<el-main>
				<Steps></Steps>
				<div id="style">
					<!-- 插入封装形式文本和按钮 -->
					<div id="text"><i class="el-icon-takeaway-box"></i>封装形式</div>
					<div class="mode">
						<el-button type="success" class='btn' @click="confirm($event)">BGA</el-button>
						<el-button type="success" class='btn' @click="confirm($event)">QFN</el-button>
						<el-button type="success" class='btn' @click="confirm($event)">WLCSP</el-button>
						<el-button type="success" class='btn' @click="confirm($event)">......</el-button>
					</div>
				</div>
			</el-main>
			<!-- 底部区域 -->
			<el-footer></el-footer>
		</el-container>
	</div>
</template>

<script>
	// 导入组件
	import Steps from '../../components/Steps'
	export default {
		name: 'S1',
		data() {
			return {

			}
		},
		components: {
			Steps,
		},
		methods: {
			confirm(event) {
				// 得到DOM标签的内容
				const btn = event.target.innerHTML
				// 正则过滤字符串
				const str = String(btn.match(/^[A-Za-z]+$/))
				// 提示是否确认的弹框
				this.$confirm('将进行' + str + '封装，是否继续？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					customClass: 'yes-btn',
					type: 'warning',
				}).then((action) => {
					this.$message({
						type: 'success',
						message: '开始进行' + str + '封装！',
					})
					// 确认按钮回调路由
					if (action === 'confirm') {
						this.$router.push({
							path: '/S2',
							
						})
					}
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消' + str + '封装！'
					});
				});
			}
		},
	}
</script>

<!-- 设置样式 -->
<style scoped>
	.el-header,
	.el-footer {
		background-color: #333333;
		color: #333;
		text-align: center;
		line-height: 80px;
	}

	.el-main {
		text-align: center;
		height: 640px;
	}
	/* 设置文本样式 */
	#text {
		margin: 50px 0px 80px;
		width: 100%;
	}
	
	/* 设置主体样式 */
	#style {
		font-size: 30px;
		margin: 80px 0px 10px;
		padding: 45px 0px 45px;
		height: 250px;
		background-color: rgba(180, 255, 224, .5);
	}
	
	/* 按钮水平均匀布局 */
	.mode {
		display: flex;
		justify-content: space-around;
	}
	
	.mode .el-button {
		margin: 0;
		padding: 0;
		font-size: 30px;
		line-height: 60px;
		width: 140px;
	}
</style>
<style type="text/css">
	/* 修改按钮中span的大小和位置 */
	.btn span {
		display: inline-block;
		height: 3.875rem;
		width: 8.75rem;
	}
	
	/* 修改确认按钮的颜色 */
	.yes-btn .el-message-box__btns .el-button:nth-child(2) {
		border: 1px solid #dcdfe6;
		background-color: #85ce61;
	}
</style>